﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>ILD政务项目后台UI框架-960px固定宽度版本</title>
    <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
	<script language="javascript" src="theme/javascript/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="theme/default/css/reset.css">
	<link rel="stylesheet" type="text/css" href="theme/default/css/index.css">
	<script language="javascript" src="theme/javascript/index.js" type="text/javascript"></script>

	<!-- 按钮  begin -->	
	<link rel="stylesheet" type="text/css" href="theme/javascript/css/linkbutton.css">	
	<link rel="stylesheet" type="text/css" href="theme/javascript/css/icon.css">	
	<script language="javascript" src="theme/javascript/nbeport.linkbutton.js" type="text/javascript"></script>
    <!-- 按钮  end -->

	<!--滚动条  begin -->
    <script language="javascript" src="theme/javascript/jquery.tinyscrollbar.min.js" type="text/javascript"></script>	
    <script language="javascript" src="theme/javascript/website.js" type="text/javascript"></script>	
    <script language="javascript" src="theme/javascript/cufon.js" type="text/javascript"></script>	
   
 <!-- 滚动条  end -->
	
	<!-- alert弹窗控件  begin -->
    <link rel="stylesheet" type="text/css" href="theme/javascript/skins/blue.css">
    <script language="javascript" src="theme/javascript/jquery.artDialog.min.js" type="text/javascript"></script>	
    <script language="javascript" src="theme/javascript/artDialog.plugins.min.js" type="text/javascript"></script>	
    <!-- alert弹窗控件  end -->
</head>

<body >
<script type="text/javascript">
$(document).ready(
function(){
  $(".looksource").click(function(){
  var m = $(this).parent().parent().parent().html(); 
  prompt("源码如下:(请直接复制使用)",m)});


  
  
  
  
  });


</script>
<div id="head" >

    <p>欢迎您，<span class="y">nbeport</span></p>
</div>
<ul class="nav">
  <li><a href="index.html">首页</a></li>
  <li><a href="nav.html">导航条模板</a></li>  
  <li><a href="tip.html">提示框模板</a></li>  
  <li  class="cur"><a href="button.html">按钮模板</a></li>  
  <li><a href="leftmenu.html">左侧菜单模板</a></li>  
  <li><a class="go" href="#">弹窗控件预留</a></li>    
</ul> 


<div id="mainbody">

  <div class="l">
   <div class="name"><span>按钮模板</span></div>
   <div class="list" id="list">
   <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
		<div class="viewport">
			 <ul class="overview">		 
              <li><a href="#" class="active"><span>button样式</span></a></li>			  
              <li><a href="#" class="active"><span>button样式</span></a></li>			  
              <li><a href="#" class="active"><span>button样式</span></a></li>			  
              <li><a href="#" class="active"><span>button样式</span></a></li>			  
              <li><a href="#" class="active"><span>button样式</span></a></li>			  
              <li><a href="#" class="active"><span>button样式</span></a></li>			  
              <li><a href="#" class="active"><span>button样式</span></a></li>			  
              <li><a href="#" class="active"><span>button样式</span></a></li>			  
              <li><a href="#" class="active"><span>button样式</span></a></li>			  
              <li><a href="#" class="active"><span>button样式</span></a></li>		         
    		
             </ul>
		</div>
   </div>
  </div>  
  
  <div class="r" >
    <div class="name"><span>内容标题</span></div>
    <div class="content">
  
 
	<div id="scrollbar1">
		<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
		<div class="viewport">
			 <div class="overview">
     <a href="#" class="l-btn" icon="icon-remove">移除</a>  
     <a href="#" class="l-btn" icon="icon-save">保存</a>  
     <a href="#" class="l-btn" icon="icon-cut">剪切</a>  
     <a href="#" class="l-btn" icon="icon-ok">确认</a>  
     <a href="#" class="l-btn" icon="icon-no">移除</a>  
     <a href="#" class="l-btn" icon="icon-cancel">取消</a>  
     <a href="#" class="l-btn" icon="icon-reload">刷新</a>  
     <a href="#" class="l-btn" icon="icon-search">搜索</a>  
     <a href="#" class="l-btn" icon="icon-print">打印</a>  
     <a href="#" class="l-btn" icon="icon-help">帮助</a>  
     <a href="#" class="l-btn" icon="icon-undo">撤销</a>  
     <a href="#" class="l-btn" icon="icon-redo">重做</a>    
     <a href="#" class="l-btn" icon="icon-back">返回</a>  
     <a href="#" class="l-btn" icon="icon-top">置顶</a>  
     <a href="#" class="l-btn" icon="icon-modify">书写</a>  
     <a href="#" class="l-btn" icon="icon-lock">锁定</a> 
	 <a href="#" class="l-btn" >查看会员价</a>
	  <a href="#" class="l-btn" >出运方案</a>
	   <a href="#" class="l-btn" >客户报价</a>
	    <a href="#" class="l-btn" >导出运价</a>
		  <a href="#" class="l-btn" >初始化列表</a>
	 <hr style="width:100%;float:left;clear:both;"></hr>	
	 <a href="#" class="btnuser01"><span>按钮深蓝色</span></a>
	 <a href="#" class="btnuser01"><span>按钮深蓝色</span></a>
	 <a href="#" class="btnuser01"><span>按钮深蓝色</span></a>
	 <a href="#" class="btnuser01"><span>按钮深蓝色</span></a>
	 <a href="#" class="btnuser01"><span>按钮深蓝色</span></a>
     <hr style="width:100%;float:left;clear:both;"></hr>	
     <a class="btn_3d" href="#"><span>3D立体圆弧按钮</span></a>	 
     <a class="btn_3d" href="#"><span>通过滑动门实现</span></a>		 
     <a class="btn_3d" href="#"><span>我最多大概就这么长的一段</span></a>	 
     <hr style="width:100%;float:left;clear:both;"></hr>				
     <a class="btn_3dc" href="#"><span>3D立体圆角按钮</span></a>	 
     <a class="btn_3dc" href="#"><span>通过滑动门实现</span></a>		 
     <a class="btn_3dc" href="#"><span>我最多大概就这么长的一段</span></a>	 
     <hr style="width:100%;float:left;clear:both;"></hr>	
     <a class="btn_blue" href="#"><span>蓝色按钮</span></a>	 
     <a class="btn_blue" href="#"><span>通过滑动门实现</span></a>		 
     <a class="btn_blue" href="#"><span>我最多大概就这么长的一段长段长</span></a>	 
     <hr style="width:100%;float:left;clear:both;"></hr>	
	 
	 <div class="wrap">
	   <div class="container">
	         <a class="btn_blue" href="#"><span>蓝色按钮</span></a>	 
             <a class="btn_blue" href="#"><span>通过滑动门实现</span></a>		 
             <a class="btn_blue" href="#"><span>放在wrap(container)容器里居中</span></a>	
	   </div>
	 </div>
 <hr style="width:100%;float:left;clear:both;margin-bottom:10px;"></hr>		 
 <h4 class="buttontitle" > 以下的都属于HTML5+css3伪类制作的按钮，active::before::after使用伪类支持三种状态展示，不涉及图片，代码化，载入速度快，为未来预留</h4>  
            <div class="nbeportButtonStyle">
 
                        <a class="a_demo_three first_button" href="#">
                            我是html5按钮，nbeport现在还不能用我，预留着以后用
                        </a>
                  
                  
                        <a href="#" class="a_demo_three second_button">
                            第二步 请点击
                        </a>
                  
                        <a href="#" class="a_demo_three third_button">
                           第三步 请点击
                        </a>
			</div>
						
						


<div class="nbeportButtonStyle">
	
	<input class="button black" type="button" value="Input Element" /> 
	<button class="button black">Button Tag</button>
	<span class="button black">Span</span> 
	<div class="button black">Div</div> 
	<p class="button black">P Tag</p> 
	<h3 class="button black">H3</h3> 
</div>

<div class="nbeportButtonStyle">
	<a href="#" class="button gray">Gray</a> 
	<a href="#" class="button gray bigrounded">Rounded</a> 
	<a href="#" class="button gray medium">Medium</a> 
	<a href="#" class="button gray small">Small</a> 
	<br /><br />
	<input class="button gray" type="button" value="Input Element" /> 
	<button class="button gray">Button Tag</button>
	<span class="button gray">Span</span> 
	<div class="button gray">Div</div> 
	<p class="button gray">P Tag</p> 
	<h3 class="button gray">H3</h3> 
</div>

<div class="nbeportButtonStyle">
	<a href="#" class="button white">White</a> 
	<a href="#" class="button white bigrounded">Rounded</a> 
	<a href="#" class="button white medium">Medium</a> 
	<a href="#" class="button white small">Small</a> 
	<br /><br />
	<input class="button white" type="button" value="Input Element" /> 
	<button class="button white">Button Tag</button>
	<span class="button white">Span</span> 
	<div class="button white">Div</div> 
	<p class="button white">P Tag</p> 
	<h3 class="button white">H3</h3> 
</div>

<div class="nbeportButtonStyle">
	<a href="#" class="button orange">Orange</a> 
	<a href="#" class="button orange bigrounded">Rounded</a> 
	<a href="#" class="button orange medium">Medium</a> 
	<a href="#" class="button orange small">Small</a> 
	<br /><br />
	<input class="button orange" type="button" value="Input Element" /> 
	<button class="button orange">Button Tag</button>
	<span class="button orange">Span</span> 
	<div class="button orange">Div</div> 
	<p class="button orange">P Tag</p> 
	<h3 class="button orange">H3</h3> 
</div>

<div class="nbeportButtonStyle">
	<a href="#" class="button red">Red</a> 
	<a href="#" class="button red bigrounded">Rounded</a> 
	<a href="#" class="button red medium">Medium</a> 
	<a href="#" class="button red small">Small</a> 
	<br /><br />
	<input class="button red" type="button" value="Input Element" /> 
	<button class="button red">Button Tag</button>
	<span class="button red">Span</span> 
	<div class="button red">Div</div> 
	<p class="button red">P Tag</p> 
	<h3 class="button red">H3</h3> 
</div>

<div class="nbeportButtonStyle">
	<a href="#" class="button blue">Blue</a> 
	<a href="#" class="button blue bigrounded">Rounded</a> 
	<a href="#" class="button blue medium">Medium</a> 
	<a href="#" class="button blue small">Small</a> 
	<br /><br />
	<input class="button blue" type="button" value="Input Element" /> 
	<button class="button blue">Button Tag</button>
	<span class="button blue">Span</span> 
	<div class="button blue">Div</div> 
	<p class="button blue">P Tag</p> 
	<h3 class="button blue">H3</h3> 
</div>

<div class="nbeportButtonStyle">
	<a href="#" class="button rosy">Rosy</a> 
	<a href="#" class="button rosy bigrounded">Rounded</a> 
	<a href="#" class="button rosy medium">Medium</a> 
	<a href="#" class="button rosy small">Small</a> 
	<br /><br />
	<input class="button rosy" type="button" value="Input Element" /> 
	<button class="button rosy">Button Tag</button>
	<span class="button rosy">Span</span> 
	<div class="button rosy">Div</div> 
	<p class="button rosy">P Tag</p> 
	<h3 class="button rosy">H3</h3> 
</div>

<div class="nbeportButtonStyle">
	<a href="#" class="button green">Green</a> 
	<a href="#" class="button green bigrounded">Rounded</a> 
	<a href="#" class="button green medium">Medium</a> 
	<a href="#" class="button green small">Small</a> 
	<br /><br />
	<input class="button green" type="button" value="Input Element" /> 
	<button class="button green">Button Tag</button>
	<span class="button green">Span</span> 
	<div class="button green">Div</div> 
	<p class="button green">P Tag</p> 
	<h3 class="button green">H3</h3> 
</div>

<div class="nbeportButtonStyle">
	<a href="#" class="button pink">Pink</a> 
	<a href="#" class="button pink bigrounded">Rounded</a> 
	<a href="#" class="button pink medium">Medium</a> 
	<a href="#" class="button pink small">Small</a> 
	<br /><br />
	<input class="button pink" type="button" value="Input Element" /> 
	<button class="button pink">Button Tag</button>
	<span class="button pink">Span</span> 
	<div class="button pink">Div</div> 
	<p class="button pink">P Tag</p> 
	<h3 class="button pink">H3</h3> 
</div>						
                  
             
			 </div>
		</div>
	</div>	
	</div>
  
  

  </div>   
  
     
</div>   
    <!-- mainbody结尾 -->

 <div id="footer">
 
   
   <p> 
  <!-- 底部链接 预留 <a href="#">合作企业</a>|<a href="#">联系我们</a>|<a href="#">帮助中心</a></br>-->
   Copyright© 2009 nbeport.gov.cn All Rights Reserved</br>

</p>   


 </div> <!--end of footer -->
</body>
</html>
